<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
    <title>跟踪记录列表</title>
    <meta name="decorator" content="default"/>
    <link rel="stylesheet" href="${ctxStatic}/bootstrap-table/bootstrap-table.css">
    <script src="${ctxStatic}/bootstrap-table/bootstrap-table.js"></script>
    <script src="${ctxStatic}/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="${ctxStatic}/bootstrap-table/config.js"></script>
</head>
<body>
	<ul class="nav nav-tabs">
	    <!--默认不跳转-->
		<li class="active"><a href="javascript:void(0);">跟踪记录列表</a></li>
		<shiro:hasPermission name="customer:visitRecord:edit"><li><a href="${ctx}/customer/visitRecord/form">跟踪记录添加</a></li></shiro:hasPermission>
	</ul>
	<!-- ajax模式下不选择标签 请删除
	<%--<sys:message content="${message}" />--%>
	-->
    <!--Ocean samo的实现方式 推荐使用-->

	<!-- 使用toolbar 在config对象中增加 toolbar = div的id 属性
	<div id="toolbar">
        <button id="search" class="btn btn-primary">
            查询<i class="icon icon-search icon-white"></i>
        </button>
        <button id="select" class="btn btn-info">
            选择<i class="icon icon-ok icon-white"></i>
        </button>
    </div>
    -->
    <form id="searchForm" action="${ctx}/customer/visitRecord/listAjaxData" method="post" class="breadcrumb form-search">
        <ul class="ul-form">
            <ul class="ul-form">
                <li>
                    <div class="input-prepend">
                        <span class="add-on">查询(中)</span>
                        <input name="s1" type="text" class="input-medium" placeholder="s1"/>
                    </div>
                    <div class="input-prepend">
                        <span class="add-on">查询(小)</span>
                        <input name="productTypeValue" type="text" class="input-small" placeholder="s2"/>
                    </div>
                </li>
            </ul>
            <ul class="ul-form">
                <li>
                    <div class="input-prepend">
                        <span class="add-on">选择(中)</span>
                        <select name="status" class="select-medium">
                            <option value="">全&nbsp;&nbsp;&nbsp;&nbsp;部</option>
                            <option value="haha">哈哈</option>
                            <option value="hehe">呵呵</option>
                        </select>
                    </div>
                    <button id="search" class="btn btn-small btn-primary" type="button">
                        查询<span class="icon-search icon-white"></span>
                    </button>
                    <button id="open" class="btn btn-small btn-primary" type="button">
                        开启<span class="icon-eye-open icon-white"></span>
                    </button>
                    <button id="close" class="btn btn-small btn-primary" type="button">
                        关闭<span class="icon-eye-close icon-white"></span>
                    </button>
                </li>
                <li class="btns">
                </li>
                <li class="clearfix"></li>
            </ul>
        </ul>
    </form>


	<table id="contentTable" data-url="${ctx}/customer/visitRecord/listAjaxData">
        <thead>
        <!-- 表内按钮不使用请注释
        <tr>
            <th colspan="3">
                <ul class="nav nav-toolbar">
                    <li><a href="javascript:void(0);">按钮1</a></li>
                    <li>|</li>
                    <li><a href="javascript:void(0);">按钮2</a></li>
                    <li>|</li>
                    <li><a href="javascript:void(0);">按钮3</a></li>
                </ul>
            </th>
        </tr>
        -->
        <tr>
            <!--不需要选择请删除-->
            <th data-field="stateYourself" data-checkbox="true" data-align="center"></th>
            <th data-field="id"  data-align="center">id</th>
            <th data-field="version"  data-align="center">version</th>
            <th data-field="customerStatusId"  data-align="center">客户状态</th>
            <th data-field="customerStatusDetailId"  data-align="center">客户状态明细</th>
            <th data-field="dateCreated"  data-align="center">创建时间</th>
            <th data-field="lastUpdated"  data-align="center">最后更新时间</th>
            <th data-field="potentialCustomerId"  data-align="center">潜在客户id</th>
            <th data-field="visitRecord"  data-align="center">回访记录描述</th>
            <th data-field="visitResult"  data-align="center">(目前废弃）</th>
            <th data-field="visitResultDetailId"  data-align="center">(目前废弃）</th>
            <th data-field="createUserId"  data-align="center">创建用户</th>
            <th data-field="lastCustomerStatusId"  data-align="center">最后客户状态</th>
            <th data-field="lastCustomerStatusDetailId"  data-align="center">最后客户明细状态</th>
            <th data-field="operationType"  data-align="center">操作类型</th>
            <th data-field="visitNum"  data-align="center">回访次数</th>
            <th data-field="targetProducts"  data-align="center">目标产品</th>
            <th data-field="predictSaleDate"  data-align="center">预计成单日期</th>
            <th data-field="predictSaleAmount"  data-align="center">预计成单金额</th>
            <th data-field="predictSalePercentage"  data-align="center">预计成单可能性（百分比）整数</th>
            <th data-field="operate" data-align="left" data-formatter="operateFormatter" data-events="operateEvents" >操作</th>
        </tr>
        </thead>
	</table>
    <script type="text/javascript">
        $(document).ready(function() {
            closeTip();
            /** 测试例子 查询 和选择
            $("#search").click(function () {
                var ids = $.map($("#contentTable").bootstrapTable('getSelections'), function (row) {
                    return row.id
                });
                alert("您选择了:" + ids);
            });
            **/

            //简化版 使用bootstrap风格 2选1 BTConfigSimple的样式更简单
            $("#contentTable").bootstrapTable(
                $.fn.BTConfigSimple({
                    pageList: [30, 50, 100],
                    pageSize: 30,
                    sortName: "id"
                }));

            $("#search").click(function () {
                refresh();
            });
        });
        //全局函数部分
        function refresh(){
            $("#contentTable").bootstrapTable(
                'refresh',
                $("#searchForm").refreshByForm());
        }

        function operateFormatter(value, row, index){
            var array = [];
            array.push('<a class="edit" href="${ctx}/customer/visitRecord/form?id='+row.id+'" title="编辑/查看">');
            array.push('<i class="icon icon-edit"></i>');
            array.push('</a>');
            <shiro:hasPermission name="customer:visitRecord:edit">
                array.push('  ');
                array.push('<a class="remove" href="javascript:void(0)" title="删除">');
                array.push('<i class="icon icon-remove"></i>');
                array.push('</a>');
            </shiro:hasPermission>
            return array.join('');
        }

        var operateEvents = {
            'click .remove': function (e, value, row, index) {
                confirmx("您确认要删除记录[" + row.name + "]?",
                function () {
                    $.ajax({
                        url: "${ctx}/customer/visitRecord/delete",
                        type: "post",
                        data: {id: row.id},
                        dataType: "json",
                        success: function (data) {
                            if (data.state == true) {
                            showTip(data.message);
                            refresh();
                        } else {
                            alertx(data.message);
                        }
                        },
                        error: function (data, state, error) {
                            alertx(data.responseText, null, '请求错误');
                        }
                    });});
            }
        };

    </script>

	<!--纯js实现方式不推荐-->
	<!--
	<table id="contentTable">
	</table>
	<%--<script type="text/javascript">
    $(document).ready(function() {
        /** 测试例子 查询 和选择
        $("#select").click(function () {
            var ids = $.map($("#contentTable").bootstrapTable('getSelections'), function (row) {
                return row.id
            });
            alert("您选择了:" + ids);
        });
        $("#select").click(function () {
            $("#contentTable").bootstrapTable('refresh',
                {
                    url: "${ctx}/customer/visitRecord/listAjaxData",//传url则从1开始不传则从当前页开始
                    query: {name: 'config by yourself'}
                }
            );
        });
        **/

        //简化版 使用bootstrap风格 2选1 请自行删除一部分
        //BTConfigSimple的样式更简单
        $("#contentBootStrap").bootstrapTable($.fn.BTConfigSimple());


        $("#search").click(function () {
            //直接根据参数,进行刷新,前端已处理后端需要自己实现
            $("#contentTable").bootstrapTable('refresh',$("#searchForm").refreshByForm());
        });
        //BTConfigSimple简单起见可以切换为
        $("#contentTable").bootstrapTable($.fn.BTConfigSimple({
            url: "${ctx}/customer/visitRecord/listAjaxData",
            columns: [{
                field: 'state',
                checkbox: true,
                align: 'center'
            },
            {
                title: '主键',
                field: 'id',
                align: 'left'
            },
            {
                field: 'operate',
                title: '操作',
                align: 'center',
                events: {
                    'click .edit': function (e, value, row, index) {
                        alert('编辑这行: ' + JSON.stringify(row));
                    },
                    'click .remove': function (e, value, row, index) {
                        alert('删除这行: ' + JSON.stringify(row));
                    }
                },
                formatter: function (value, row, index) {
                    return [
                        '<a class="edit" href="javascript:void(0)" title="编辑">',
                        '<i class="icon icon-edit"></i>',
                        '</a>  ',
                        '<a class="remove" href="javascript:void(0)" title="删除">',
                        '<i class="icon icon-remove"></i>',
                        '</a>'
                    ].join('');
                }
            }
            ]
        }));
    });

    var operateEvents = {
        'click .edit': function (e, value, row, index) {
                        alert('编辑这行: ' + JSON.stringify(row));
                    },
            'click .remove': function (e, value, row, index) {
                alert('删除这行: ' + JSON.stringify(row));
         }
    };

    function operateFormatter(value, row, index){
        return [
            '<a class="edit" href="javascript:void(0)" title="编辑">',
            '<i class="icon icon-edit"></i>',
            '</a>  ',
            '<a class="remove" href="javascript:void(0)" title="删除">',
            '<i class="icon icon-remove"></i>',
            '</a>'
        ].join('');
    }
    </script>--%>
    -->

</body>
</html>